<template>
  <div>
    <el-button type="primary" size="mini" class="add" @click="handleAddClick()">添加门店</el-button>
    <shop-add-dialog   :dialogAddVisible="dialogAddVisible"
                       :dialogInfo="dialogInfo"
                       :categoryOptions="categoryOptions"
                       :sellerOptions="sellerOptions"
                       @search="search"
                       @selection-change="handleSelectionChange"
                       @update:dialogAddVisible="dialogVisibles">

    </shop-add-dialog>

    <shop-see-dialog  :dialogSeeVisible="dialogSeeVisible"
                       :dialogInfo="dialogInfo"
                       :categoryOptions="categoryOptions"
                       :sellerOptions="sellerOptions"
                       :fileList="fileList"
                       @search="search"
                       @selection-change="handleSelectionChange"
                       @update:dialogSeeVisible="dialogSeeVisibles">

    </shop-see-dialog>
    <el-button type="danger" size="mini" class="add" @click="handleRemoveClick()">删除门店</el-button>
    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
      <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow" >确 定</el-button>
            </span>
    </el-dialog>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">

      <!--商品管理-->
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-button @click="addGoodsClick(scope.row,scope.$index)" type="success" size="small">添加商品</el-button>
          <goods-add-dialog   :dialogGoodsAddVisible="dialogGoodsAddVisible"
                              :dialogInfo="dialogInfo"
                              @search="search"
                              @update:dialogInfo="updateGoodsInfo"
                              @update:dialogGoodsAddVisible="dialogGoodsVisibles">

          </goods-add-dialog>
          <el-table
            :data="scope.row.goodsList"
            style="width: 100%">
            <el-table-column
              label="商品 ID"
              prop="id">
            </el-table-column>
            <el-table-column
              label="商品名称"
              prop="goodName">
            </el-table-column>
            <el-table-column
              label="描述"
              prop="description">
            </el-table-column>
            <el-table-column
              label="价格"
              prop="price">
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="goodsScope">
                <el-button @click="updateGoodsClick(goodsScope.row,goodsScope.$index,scope.$index)" type="text" size="small">编辑</el-button>
                <goods-see-dialog   :dialogGoodsSeeVisible="dialogGoodsSeeVisible"
                                    :dialogGoodsInfo="dialogGoodsInfo"
                                    @search="search"
                                    :fileList="fileList"
                                    @update:dialogGoodsInfo="updateGoodsInfo"
                                    @update:dialogGoodsSeeVisible="dialogGoodsSeeVisibles">

                </goods-see-dialog>
                <el-button @click="confirmGooodRemoveClick(goodsScope.row.id)" type="text" size="small">删除</el-button>
                <!-- 删除提示框 -->
                <div>
                  <el-dialog title="提示" :visible.sync="delGoodsVisible"  center>
                    <div class="del-dialog-cnt">确认删除商品？</div>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="delGoodsVisible = false">取 消</el-button>
                      <el-button type="primary" @click="deleteGoodsClick(scope.row.id,scope.$index)" >确 定</el-button>
                    </span>
                  </el-dialog>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>

      <el-table-column
        type="selection">
      </el-table-column>
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="name"
        label="商户名称">
      </el-table-column>
      <el-table-column
        prop="remarkScore"
        label="评分">
      </el-table-column>
      <el-table-column
        prop="pricePerMan"
        label="人均价格">
      </el-table-column>
      <el-table-column
        prop="categoryName"
        label="品类信息">
      </el-table-column>
      <el-table-column
        prop="tags"
        label="标签">
      </el-table-column>
      <el-table-column
        prop="startTime"
        label="营业开始时间">
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="营业结束时间">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址" :show-overflow-tooltip=true>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" size="small">信息编辑</el-button>

        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchData.page"
        :page-sizes="[5,10, 20, 50]"
        :page-size="searchData.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { pageRequest,remove } from '@/api/shop'
  import { getUrl } from  '@/api/file'
  import  {list} from "@/api/category";
  import {save,sellerList} from '@/api/seller'
  import {removeGoodsById,listByShopId} from  '@/api/goods'
  import ShopAddDialog from "./components/shopAddDialog"; //引入组件
  import ShopSeeDialog from "./components/shopSeeDialog";
  import GoodsAddDialog from "./components/goodsAddDialog"
  import GoodsSeeDialog from "./components/goodsSeeDialog"
  import { dateFormat } from '@/utils/dateUtils'
  export default {
    name: "SellerManage",
    components: {
      ShopAddDialog,
      ShopSeeDialog,
      GoodsAddDialog,
      GoodsSeeDialog
    },
    data() {
      return {
        //控制弹窗 显示
        dialogSeeVisible: false,
        delVisible: false,
        delGoodsVisible: false,
        dialogAddVisible: false,
        dialogGoodsAddVisible:false,
        dialogGoodsSeeVisible:false,
        //点击查看按钮  这条数据详细信息
        dialogInfo:{},
        dialogInfoIndex:0,
        dialogGoodsInfo:{},
        dialogGoodsInfoIndex:0,
        //分类信息
        categoryOptions:[],
        categoryMap:{},
        //商户信息
        sellerOptions:[],
        sellerMap:{},
        fileList:[],
        totalCount:0,
        tableData: [],
        deleteGoodsId:'',
        multipleSelection: [],
        multipleSelectionIds:[],
        searchData:{
          page: 1,
          size: 5,
        }
      }
    },
    mounted() {
      list().then((response) => {
        this.categoryOptions= response.data;
        this.categoryOptions.forEach(category=>{
            this.categoryMap[category.id] = category.name
        })
      }).catch((response) => {
        console.log(response);
      });
      sellerList().then((response) => {
        this.sellerOptions= response.data;
        this.sellerOptions.forEach(seller=>{
          this.sellerMap[seller.id] = seller.name
        })
      }).catch((response) => {
        console.log(response);
      });
      this.search();
    },
    methods: {
      dateFormat(date){
        return  dateFormat(date);
      },
      //点击查看 按钮  的事件
      handleAddClick() {
        this.dialogAddVisible = true;

      },
      handleRemoveClick(){
        if (this.multipleSelection.length===0){
          this.$message.warning("请选择至少一条记录");
        }else{
          this.delVisible = true;
        }
      },
      confirmGooodRemoveClick(id){
        this.delGoodsVisible = true;
        this.deleteGoodsId =id;
      },
      deleteRow(){
        remove(this.multipleSelectionIds).then((response) => {
          this.delVisible = false;
          this.$message.success("删除成功");
          this.search()
        }).catch((response) => {
          console.log(response);
        })
      },
      addGoodsClick(info,index){
        this.dialogGoodsAddVisible = true;
        this.dialogInfo = info;
        this.dialogInfoIndex = index;
      },
      updateGoodsClick(info,index,shopIndex){
        this.dialogGoodsSeeVisible = true;
        this.dialogGoodsInfo = info;
        this.dialogGoodsInfoIndex = index;
        this.dialogInfoIndex = shopIndex;
        //商品图片
        getUrl(info.iconUrl).then((response) => {
          this.dialogInfo.imgUrl = response.data;
          if (response.data !==null&&response.data.length!==0){
            this.fileList=[{name: this.dialogInfo.name,url: response.data}];
          }else{
            this.fileList=[];
          }
        }).catch((response) => {

        })
      },
      deleteGoodsClick(id,index){
        removeGoodsById(this.deleteGoodsId ).then((response) => {
          this.delGoodsVisible = false;
          this.$message.success("删除成功");
          //更新商品
          this.refreshGoodsRequest(id,index);

        }).catch((response) => {
          console.log(response);
        })
      },
      refreshGoodsRequest(id,index){
        listByShopId(id).then((response) => {
          if(response.code===200){
            this.tableData[index].goodsList = response.data;
          }
        });
      },
      handleClick(info) {
        this.dialogSeeVisible = true;
        this.dialogInfo = info;
        getUrl(info.iconUrl).then((response) => {
          this.dialogInfo.imgUrl = response.data;
          if (response.data !==null&&response.data.length!==0){
            this.fileList=[{name: this.dialogInfo.name,url: response.data}];
          }else{
            this.fileList=[];
          }
        }).catch((response) => {

        })
      },
      //子组件传 过来的 数据
      dialogVisibles(v){
        this.dialogAddVisible = v
      },
      dialogGoodsVisibles(v){
        this.dialogGoodsAddVisible = v
      },
      dialogGoodsSeeVisibles(v){
        this.dialogGoodsSeeVisible = v
      },
      dialogSeeVisibles(v){
        this.dialogSeeVisible = v
      },
      updateGoodsInfo(v){
        console.log("商品列表更新");
        this.tableData[this.dialogInfoIndex].goodsList = v;
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.multipleSelectionIds = [];
        this.multipleSelection.forEach(selection=>{
          this.multipleSelectionIds.push(selection.id);
        })
      },
      handleSizeChange(val) {
        this.search();
        this.searchData.size= val;
      },
      handleCurrentChange(val) {
        this.search();
        this.searchData.page= val;
      },
      search(){
        pageRequest(this.searchData).then((response) => {
          this.tableData = response.data.pageList;
          this.tableData.forEach(data=>{
            data.categoryName = this.categoryMap[data.categoryId];
            data.sellerName = this.sellerMap[data.sellerId];
          })
          this.totalCount = response.data.totalCount;
        }).catch((response) => {
          console.log(response);
        })
      }
    }
  }
</script>

<style>
  .add{
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
  }
</style>
